<template>

  <div class="map-box">

      <div id="box0">
        <div id="GISbox" ref="parent">
          
        </div>
      </div>
      <div id="box2">
        <message-box ref="FeaturePicker" @setPosition="setMessagePosition"></message-box>
      </div>
      <div id="box1">
        <bloom ref="lightSetting" v-show="true" @setLight="setLight"></bloom>
      </div>

  </div>
</template>

<script>
  import {
    addBillBoard,
    addLabel
  } from '@/assets/js/addBillBoard'
  import {
    LoadModel
  } from '@/assets/js/LoadModel'
  import Bloom from '@/components/CesiumExample/Bloom';
  import MessageBox from '@/components/CesiumExample/MessageBox'
  import {
    showLaLon
  } from '@/assets/js/utils'
  import loadKml from '@/assets/js/loadKml'
  import rotate from '@/assets/js/rotate'
  export default {
    components: {
      Bloom,
      MessageBox
    },
    data() {
      return {
        brightness: undefined,
      }
    },
    mounted() {
      // let viewer = InitViewer();
      // let viewer =SmViewer.viewer;
      // let scene = SmViewer.scene;
      
      if(!this.GLOBAL.flag){
        this.setGIS()
        
        this.GLOBAL.flag =true;
      var viewer =this.GLOBAL.Viewer
      addBillBoard(viewer);
      addLabel(viewer)
      var loadModel = LoadModel(viewer);
      var stages = viewer.scene.postProcessStages
      this.brightness = stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage())
      this.brightness.enabled = true;
      this.$refs.lightSetting.updatePostProcess();
      this.$refs.FeaturePicker.loadFeaturePicker(viewer);
      // showLaLon(viewer);
      loadKml(viewer)
      rotate(viewer,120.42909,36.31223)
      }
    },
    // activated(){
    //   rotate(this.viewer,120.42909,36.31223)
    // },
      //     beforeDestroy() {
      //   this.destroy3D()
      // },
    methods: {
      // beforeRouteLeave(to,from,next){
      //   if(to.name=="主页"||to.name=="about"||from.name=="主页"||from.name=="about"){
      //     from.meta.keepAlive =true;
      //     to.meta.keepAlive =true;
      //     this.$destroy();
      //     next()
      //   }else{
      //     from.meta.keepAlive =false;
      //     to.meta.keepAlive =false;
      //     this.$destroy();
      //     next()
      //   }
      // },
      setLight(viewModel) {
        this.brightness.uniforms.brightness = Number(viewModel.brightnessValue);
      },
      setMessagePosition(mPosition) {
        let box2 = document.getElementById("box2");
        let transformX = mPosition.x + 'px';
        let transformY = mPosition.y + 'px';
        box2.style.left = transformX;
        box2.style.top = transformY;
      },
      setGIS() {
        var gis = document.getElementById("newID");
        
        gis.style.diplay = "block";
        gis.style.position = "absolute";
        gis.style.top = "0px";
        gis.style.height = "100%";
        gis.style.width = "99%";
        document.body.removeChild(gis);
        document.getElementById("GISbox").appendChild(gis)
      },

      // destroy3D() {
      //   var parent = this.$refs.parent;
      // var gis= parent.firstChild;
      //   gis.style.display = "none";
      //   parent.removeChild(gis)
      //   document.body.appendChild(gis);
      //   // document.getElementById("GISbox").removeChild(gis);
        
      // },
    }
  }
</script>
<style scoped>
  .map-box {
    width: 100%;
    height: 100%;
  }

  #box0 {
    width: 100%;
    height:100%;
    position: absolute;
    z-index: 998;
    /* height: 700px; */
  }

  #box1 {
    position: absolute;
    z-index: 999;
  }

  #box2 {
    position: absolute;
    z-index: 1000;
    padding: 0;
  }

</style>